<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<!-- 一组幻灯片代码开始，用到组件swiper -->
					<!-- indicator-dots autoplay interval……：组件相关属性，具体可以查看官网说明 -->
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<!-- 教程uni-app渲染幻灯片数据第三步：渲染数据 -->
						<swiper-item v-for="(item,index) in homeSlide" :key="index">
							<!-- uni img组件 src绑定值为服务端返回的数据中的文章缩略图 -->
							<image v-if="item.img" :src="item.img" mode=""></image>
						</swiper-item>
						<!-- 每组幻灯片中的子项目 1 -->
						<swiper-item>
							<!-- 此处放内容，可以是图片，也可是图片加文字 -->
							<view class="swiper-item uni-bg-red">A</view>
						</swiper-item>
						<!-- 每组幻灯片中的子项目 2 -->
						<swiper-item>
							<view class="swiper-item uni-bg-green">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">C</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 教程《用uni-app制作首页文章列表》首页文章列表模板代码 -->
		<view class="page-section indexListBox">
			<view class="indexList" v-for="(item,index) in homePosts" :key="index">
				<navigator :url="'/pages/detail/detail?id='+item.url">
				<image v-if="item.img" :src="item.img" mode=""></image>
				<view class="title" v-text="item.title">文章标题</view>
				</navigator>
			</view>
		</view>
		<view class="page-section indexListBox">
			<view class="indexList">
				<image src="" mode=""></image>
				<view class="title">文章标题</view>
			</view>
		</view>
		<view class="indexList">
			<image src="" mode=""></image>
			<view class="title">文章标题</view>
		</view>
		<view class="indexList">
			<image src="" mode=""></image>
			<view class="title">文章标题</view>
		</view>
		<!--        <view class="swiper-list">
            <view class="uni-list-cell uni-list-cell-pd">
                <view class="uni-list-cell-db">指示点</view>
                <switch :checked="indicatorDots" @change="changeIndicatorDots" />
            </view>
            <view class="uni-list-cell uni-list-cell-pd">
                <view class="uni-list-cell-db">自动播放</view>
                <switch :checked="autoplay" @change="changeAutoplay" />
            </view>
        </view>
        <view class="uni-padding-wrap">
            <view class="uni-common-mt">
                <text>幻灯片切换时长(ms)</text>
                <text class="info">{{duration}}</text>
            </view>
            <slider @change="durationChange" :value="duration" min="500" max="2000" />
            <view class="uni-common-mt">
                <text>自动播放间隔时长(ms)</text>
                <text class="info">{{interval}}</text>
            </view>
            <slider @change="intervalChange" :value="interval" min="2000" max="10000" />
        </view> -->
	</view>
</template>

<script>
	export default {
		//此处为该页面需要用到的数据，在项目逻辑中可以对这些数据进行改变
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				homeSlide: [], //教程uni-app渲染幻灯片数据第一步：定义值接收幻灯片数据
				homePosts: [], //教程 uni-app:渲染app的首页文章数据第一步:定义一个值来接收文章列表
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log("此页面加载时将执行我");
			//教程uni-app渲染幻灯片数据第三步：执行方法getHomeSlide（）
			this.getHomeSlideFunc();
			//教程 uni-app:渲染app的首页文章数据第一步:将该方法加入onLoad中，使页面一加载的时候就获取文章列表
			this.getHomePosts();
		},
		onShow: function(option) {
			console.log("此页面显示时将执行我");
		},
		onReady: function(option) {
			console.log("此页面初次在屏幕上渲染完成之后会执行我");
		},
		//此处为自定义方法
		methods: {
			//教程uni-app渲染幻灯片数据第二步：定义获取幻灯片数据的方法getHomeSlide（）
			getHomeSlideFunc() {
				// 用uniapp的request发起请求
				uni.request({
					url: 'https://www.tisuba.com/wp-content/themes/wpApp/api/homeSlide.php', //接口地址
					// sslVerify:false,
					success: (res) => {
						// 请求成功之后将幻灯片数据赋值给homeSlide

						this.homeSlide = res.data.post;
						console.log('request success', res)

						uni.showToast({

							title: '请求成功',

							icon: 'success',

						});
					},
					fail: (err) => {

						console.log('request fail', err);

						uni.showModal({

							content: err.errMsg,

							showCancel: false

						});

					},
				})
			},
			// 教程 uni-app:渲染app的首页文章数据第一步:定义方法获取首页文章列表接口getHomePosts（）
			getHomePosts() {
				var _self = this;
				uni.request({
					url: 'https://www.tisuba.com/wp-content/themes/wpApp/api/indexList.php', //接口地址
					success: (res) => {
						// 请求成功之后将文章列表数据赋值给homePosts
						_self.homePosts = res.data.post;
					}
				});
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style>
		.page-section.swiper{
			background-color: #FFFFFF;
			padding: 20rpx;
		}
		/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
		swiper-item {
			overflow: hidden;
			height: 270rpx;
		}
		/* 教程uni-app渲染幻灯片数据最后一步：美化 */
		swiper-item image{
			height: 100%;;
			width: 100%;
			border-radius: 15rpx;
		}

	/* 教程《用uni-app制作首页文章列表》首页文章列表css代码 */
	.indexList uni-image {
		width: 100%;
		height: 130px;
		background: #eaeaea;
	}

	.indexList {
		margin-bottom: 15px;
	}

	.indexList .title {
		background: #000;
		color: #fff;
		font-size: 16px;
		line-height: 37px;
		padding: 0 10px;
		margin-top: -5px;
	}
	.indexListBox {
		margin-top: 20px;
	}
</style>
